<template>
  <div class="log-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>日志与审计</span>
          <div>
            <el-button type="primary" size="small" @click="refreshLogs">
              刷新
            </el-button>
            <el-button type="danger" size="small" @click="clearLogs">
              清空日志
            </el-button>
          </div>
        </div>
      </template>

      <el-tabs v-model="activeTab">
        <!-- 操作日志标签页 -->
        <el-tab-pane label="操作日志" name="operation">
          <div class="log-filter">
            <el-form :inline="true" :model="operationFilterForm">
              <el-form-item label="操作类型">
                <el-select
                  v-model="operationFilterForm.operationType"
                  placeholder="选择操作类型"
                >
                  <el-option label="全部" value=""></el-option>
                  <el-option label="登录" value="login"></el-option>
                  <el-option label="数据修改" value="modify"></el-option>
                  <el-option label="数据添加" value="add"></el-option>
                  <el-option label="数据删除" value="delete"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="操作用户">
                <el-input
                  v-model="operationFilterForm.username"
                  placeholder="输入用户名"
                ></el-input>
              </el-form-item>
              <el-form-item label="时间范围">
                <el-date-picker
                  v-model="operationFilterForm.dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchOperationLogs">
                  查询
                </el-button>
                <el-button @click="resetOperationFilter">重置</el-button>
              </el-form-item>
            </el-form>
          </div>

          <el-table :data="operationLogList" style="width: 100%" border>
            <el-table-column prop="id" label="日志ID" width="80" />
            <el-table-column prop="username" label="操作用户" width="120" />
            <el-table-column prop="operation" label="操作内容" width="150" />
            <el-table-column prop="ip" label="IP地址" width="120" />
            <el-table-column prop="createTime" label="操作时间" width="180" />
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-button
                  type="primary"
                  link
                  @click="viewLogDetail(scope.row)"
                >
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <el-pagination
              v-model:current-page="operationCurrentPage"
              v-model:page-size="operationPageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="operationTotal"
              @size-change="handleOperationSizeChange"
              @current-change="handleOperationCurrentChange"
            />
          </div>
        </el-tab-pane>

        <!-- 审计日志标签页 -->
        <el-tab-pane label="审计日志" name="audit">
          <div class="log-filter">
            <el-form :inline="true" :model="auditFilterForm">
              <el-form-item label="操作类型">
                <el-select
                  v-model="auditFilterForm.operationType"
                  placeholder="选择操作类型"
                >
                  <el-option label="全部" value=""></el-option>
                  <el-option label="权限变更" value="permission"></el-option>
                  <el-option label="数据删除" value="delete"></el-option>
                  <el-option label="敏感操作" value="sensitive"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="操作用户">
                <el-input
                  v-model="auditFilterForm.username"
                  placeholder="输入用户名"
                ></el-input>
              </el-form-item>
              <el-form-item label="时间范围">
                <el-date-picker
                  v-model="auditFilterForm.dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchAuditLogs">
                  查询
                </el-button>
                <el-button @click="resetAuditFilter">重置</el-button>
              </el-form-item>
            </el-form>
          </div>

          <el-table :data="auditLogList" style="width: 100%" border>
            <el-table-column prop="id" label="日志ID" width="80" />
            <el-table-column prop="username" label="操作用户" width="120" />
            <el-table-column prop="operation" label="操作内容" width="150" />
            <el-table-column prop="ip" label="IP地址" width="120" />
            <el-table-column prop="createTime" label="操作时间" width="180" />
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-button
                  type="primary"
                  link
                  @click="viewLogDetail(scope.row)"
                >
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <el-pagination
              v-model:current-page="auditCurrentPage"
              v-model:page-size="auditPageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="auditTotal"
              @size-change="handleAuditSizeChange"
              @current-change="handleAuditCurrentChange"
            />
          </div>
        </el-tab-pane>

        <!-- 登录日志标签页 -->
        <el-tab-pane label="登录日志" name="login">
          <div class="log-filter">
            <el-form :inline="true" :model="loginFilterForm">
              <el-form-item label="登录状态">
                <el-select
                  v-model="loginFilterForm.status"
                  placeholder="选择登录状态"
                >
                  <el-option label="全部" value=""></el-option>
                  <el-option label="成功" value="success"></el-option>
                  <el-option label="失败" value="fail"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="登录用户">
                <el-input
                  v-model="loginFilterForm.username"
                  placeholder="输入用户名"
                ></el-input>
              </el-form-item>
              <el-form-item label="时间范围">
                <el-date-picker
                  v-model="loginFilterForm.dateRange"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="searchLoginLogs">
                  查询
                </el-button>
                <el-button @click="resetLoginFilter">重置</el-button>
              </el-form-item>
            </el-form>
          </div>

          <el-table :data="loginLogList" style="width: 100%" border>
            <el-table-column prop="id" label="日志ID" width="80" />
            <el-table-column prop="username" label="登录用户" width="120" />
            <el-table-column prop="status" label="登录状态" width="100">
              <template #default="scope">
                <el-tag
                  :type="scope.row.status === '成功' ? 'success' : 'danger'"
                >
                  {{ scope.row.status }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="ip" label="IP地址" width="120" />
            <el-table-column prop="device" label="设备信息" width="150" />
            <el-table-column prop="createTime" label="登录时间" width="180" />
            <el-table-column label="操作" width="100">
              <template #default="scope">
                <el-button
                  type="primary"
                  link
                  @click="viewLogDetail(scope.row)"
                >
                  详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <div class="pagination-container">
            <el-pagination
              v-model:current-page="loginCurrentPage"
              v-model:page-size="loginPageSize"
              :page-sizes="[10, 20, 50, 100]"
              layout="total, sizes, prev, pager, next, jumper"
              :total="loginTotal"
              @size-change="handleLoginSizeChange"
              @current-change="handleLoginCurrentChange"
            />
          </div>
        </el-tab-pane>
      </el-tabs>

      <!-- 日志详情对话框 -->
      <el-dialog v-model="dialogVisible" title="日志详情" width="50%">
        <el-descriptions :column="1" border>
          <el-descriptions-item label="日志ID">
            {{ currentLog.id }}
          </el-descriptions-item>
          <el-descriptions-item
            v-if="activeTab === 'operation' || activeTab === 'audit'"
            label="日志类型"
          >
            {{ activeTab === 'operation' ? '操作日志' : '审计日志' }}
          </el-descriptions-item>
          <el-descriptions-item label="用户名">
            {{ currentLog.username }}
          </el-descriptions-item>
          <el-descriptions-item
            v-if="activeTab === 'operation' || activeTab === 'audit'"
            label="操作内容"
          >
            {{ currentLog.operation }}
          </el-descriptions-item>
          <el-descriptions-item v-if="activeTab === 'login'" label="登录状态">
            <el-tag :type="currentLog.status === '成功' ? 'success' : 'danger'">
              {{ currentLog.status }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="IP地址">
            {{ currentLog.ip }}
          </el-descriptions-item>
          <el-descriptions-item v-if="activeTab === 'login'" label="设备信息">
            {{ currentLog.device }}
          </el-descriptions-item>
          <el-descriptions-item label="时间">
            {{
              activeTab === 'login'
                ? currentLog.createTime
                : currentLog.createTime
            }}
          </el-descriptions-item>
          <el-descriptions-item label="详细信息">
            <div style="white-space: pre-wrap">{{ currentLog.detail }}</div>
          </el-descriptions-item>
        </el-descriptions>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">关闭</el-button>
          </span>
        </template>
      </el-dialog>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 当前激活的标签页
const activeTab = ref('operation')

// 日志详情对话框
const dialogVisible = ref(false)
const currentLog = ref({})

// ===== 操作日志相关 =====
// 操作日志过滤表单
const operationFilterForm = reactive({
  operationType: '',
  username: '',
  dateRange: [],
})

// 操作日志分页相关
const operationCurrentPage = ref(1)
const operationPageSize = ref(10)
const operationTotal = ref(0)

// 操作日志列表数据
const operationLogList = ref([
  {
    id: '1001',
    username: 'admin',
    operation: '修改用户信息',
    ip: '192.168.1.1',
    createTime: '2023-06-01 09:15:30',
    detail: '修改用户：张三，更新了手机号码和邮箱信息',
  },
  {
    id: '1002',
    username: 'admin',
    operation: '添加用户',
    ip: '192.168.1.1',
    createTime: '2023-06-01 10:30:45',
    detail: '添加用户：李四，角色：普通用户',
  },
  {
    id: '1003',
    username: 'user01',
    operation: '修改密码',
    ip: '192.168.1.100',
    createTime: '2023-06-01 11:45:20',
    detail: '用户修改了自己的登录密码',
  },
])

// ===== 审计日志相关 =====
// 审计日志过滤表单
const auditFilterForm = reactive({
  operationType: '',
  username: '',
  dateRange: [],
})

// 审计日志分页相关
const auditCurrentPage = ref(1)
const auditPageSize = ref(10)
const auditTotal = ref(0)

// 审计日志列表数据
const auditLogList = ref([
  {
    id: '2001',
    username: 'admin',
    operation: '修改用户权限',
    ip: '192.168.1.1',
    createTime: '2023-06-01 14:20:10',
    detail: '将用户"张三"的权限从"普通用户"提升为"管理员"',
  },
  {
    id: '2002',
    username: 'admin',
    operation: '删除用户数据',
    ip: '192.168.1.1',
    createTime: '2023-06-01 15:35:25',
    detail: '永久删除了用户"王五"的所有相关数据',
  },
  {
    id: '2003',
    username: 'admin',
    operation: '修改系统配置',
    ip: '192.168.1.1',
    createTime: '2023-06-01 16:50:40',
    detail: '修改了系统敏感配置：数据备份策略',
  },
])

// ===== 登录日志相关 =====
// 登录日志过滤表单
const loginFilterForm = reactive({
  status: '',
  username: '',
  dateRange: [],
})

// 登录日志分页相关
const loginCurrentPage = ref(1)
const loginPageSize = ref(10)
const loginTotal = ref(0)

// 登录日志列表数据
const loginLogList = ref([
  {
    id: '3001',
    username: 'admin',
    status: '成功',
    ip: '192.168.1.1',
    device: 'Windows / Chrome',
    createTime: '2023-06-01 08:00:00',
    detail: '管理员正常登录系统',
  },
  {
    id: '3002',
    username: 'user01',
    status: '成功',
    ip: '192.168.1.100',
    device: 'MacOS / Safari',
    createTime: '2023-06-01 09:30:15',
    detail: '用户正常登录系统',
  },
  {
    id: '3003',
    username: 'user02',
    status: '失败',
    ip: '192.168.1.101',
    device: 'Windows / Edge',
    createTime: '2023-06-01 10:45:30',
    detail: '密码错误，登录失败',
  },
  {
    id: '3004',
    username: 'unknown',
    status: '失败',
    ip: '10.0.0.5',
    device: 'Unknown / Unknown',
    createTime: '2023-06-01 12:45:50',
    detail: '尝试使用不存在的用户名登录，可能是恶意尝试',
  },
])

// 查看日志详情
const viewLogDetail = (row: any) => {
  currentLog.value = row
  dialogVisible.value = true
}

// 刷新日志
const refreshLogs = () => {
  // 这里可以添加刷新日志的API调用
  ElMessage.success('日志刷新成功')
}

// 清空日志
const clearLogs = () => {
  ElMessageBox.confirm('确定要清空所有日志吗？此操作不可恢复！', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      // 这里可以添加清空日志的API调用
      ElMessage.success('日志已清空')
    })
    .catch(() => {
      ElMessage.info('已取消清空操作')
    })
}

// ===== 操作日志方法 =====
const searchOperationLogs = () => {
  // 这里可以添加查询操作日志的API调用
  console.log('查询操作日志', operationFilterForm)
  ElMessage.success('查询操作日志成功')
}

const resetOperationFilter = () => {
  operationFilterForm.operationType = ''
  operationFilterForm.username = ''
  operationFilterForm.dateRange = []
}

const handleOperationSizeChange = (val: number) => {
  operationPageSize.value = val
  // 重新加载数据
}

const handleOperationCurrentChange = (val: number) => {
  operationCurrentPage.value = val
  // 重新加载数据
}

// ===== 审计日志方法 =====
const searchAuditLogs = () => {
  // 这里可以添加查询审计日志的API调用
  console.log('查询审计日志', auditFilterForm)
  ElMessage.success('查询审计日志成功')
}

const resetAuditFilter = () => {
  auditFilterForm.operationType = ''
  auditFilterForm.username = ''
  auditFilterForm.dateRange = []
}

const handleAuditSizeChange = (val: number) => {
  auditPageSize.value = val
  // 重新加载数据
}

const handleAuditCurrentChange = (val: number) => {
  auditCurrentPage.value = val
  // 重新加载数据
}

// ===== 登录日志方法 =====
const searchLoginLogs = () => {
  // 这里可以添加查询登录日志的API调用
  console.log('查询登录日志', loginFilterForm)
  ElMessage.success('查询登录日志成功')
}

const resetLoginFilter = () => {
  loginFilterForm.status = ''
  loginFilterForm.username = ''
  loginFilterForm.dateRange = []
}

const handleLoginSizeChange = (val: number) => {
  loginPageSize.value = val
  // 重新加载数据
}

const handleLoginCurrentChange = (val: number) => {
  loginCurrentPage.value = val
  // 重新加载数据
}

// 初始化数据
onMounted(() => {
  // 这里可以添加初始化数据的API调用
  operationTotal.value = operationLogList.value.length
  auditTotal.value = auditLogList.value.length
  loginTotal.value = loginLogList.value.length
})
</script>

<style scoped>
.log-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.log-filter {
  margin-bottom: 20px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>
